<template>
  <div>
    <el-button  @click="getProfessionTypes">getProfessionTypes</el-button>
    <el-button @click="getUnixTime">getUnixTime</el-button>
    <el-form
      ref="player"
      class="player"
      :model="player"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-form-item prop="usernameFk" label="用户名：">
        <el-input v-model="player.usernameFk"> </el-input>
      </el-form-item>

      <el-form-item prop="nickname" label="角色昵称：">
        <el-input v-model="player.nickname"> </el-input>
      </el-form-item>
      <el-form-item prop="profession" label="角色职业：">
        <el-select v-model="player.profession">
          <el-option
            v-for="e in professionTypes"
            :key="e.index"
            :label="e.text"
            :value="e.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="goldCoin" label="金币数量：">
        <el-input v-model.number="player.goldCoin"> </el-input>
      </el-form-item>
      <el-form-item prop="silverCoin" label="银币数量：">
        <el-input v-model.number="player.silverCoin"> </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="playerSubmit()"
          >提交
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.player.resetFields()"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import New from './components/New.vue';
export default {
  name: "August",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      player: {
        usernameFk: "2016207058",
        nickname: "王五",
        profession: "architect",
        goldCoin: 30,
        silverCoin: 60,


        playerId: 0,
        version: 0,
        playerCode: null,
      },
      /*  rules: {
          username: [
              {required: true,   message: '请输入账号', trigger: 'blur'},
              {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur','change']},
              { validator:this.validateItem ,trigger:'blur'}
              ],
          password: [
              {required: true, message: '请输入密码', trigger: 'blur'},
              ],
          }
      */
      rules: {
        usernameFk: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^2016\d{6}$/,
            message: "必须是十位数字，2016开始",
            trigger: "blur",
          },
        ],
        nickname: [{ validator: this.validateNickname, trigger: "blur" }],
        goldCoin: [{ validator: this.validateGoldCoin, trigger: "blur" }],
      },

      professionTypes: [
        {
          index: 0,
          text: "建筑师",
          value: "architect",
        },
        {
          index: 1,
          text: "会计师",
          value: "accountant",
        },
      ],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {
    this.getProfessionTypes();
  },
  mounted() {},
  methods: {
    sampleM() {},
    playerSubmit() {
      this.$message(JSON.stringify(this.player));
      this.$refs.player.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/ceto/player/insert",
            data: this.player,
          }).then(
            (res) => {
              this.$message.warning(JSON.stringify(res.data));
            },
            (error) => {
              console.log(".player request error : " + error.response.status);
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
    getProfessionTypes() {
      //  http://localhost:9090/ceto/common/professionTypes
      this.$http({
        method: "get",
        url: "/ceto/common/professionTypes",
      })
      .then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.professionTypes = res.data;
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
    getUnixTime() {
      //  http://localhost:9090/ceto/common/unixTime/-1  get
      this.$http({
        method: "get",
        url: "/ceto/common/unixTime/-1",
      })
      .then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },

    validateNickname(rules, value, callback) {
      if (this.player.nickname.length < 2 || this.player.nickname.length > 10) {
        callback(new Error("昵称在2-10个字符"));
        return;
      }
      callback();
    },
    validateGoldCoin(rules, value, callback) {
      console.log(this.player.goldCoin, typeof this.player.goldCoin);
      console.log(value, typeof value);
      let t = parseInt(this.player.goldCoin);
      if (t < 0 || t > 100) {
        callback(new Error("金额在0-100之间"));
        return;
      }
      callback();
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 350px;
}
</style>
